<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>党校教育</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="css/silver/pace-theme-loading-bar.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" href="./css/md-common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div style="opacity: 0" class="swiper-container pages-box">
  <section class="u-arrow-bottom">
    <div class="pre-wrap-bottom">
    </div>
  </section>
  <div id="audio_btn" class="off" style="display: block;">
    <div id="yinfu"></div>
    <audio loop="" src="./resource/edu.mp3" id="media" autoplay="autoplay" preload=""></audio>
  </div>

  <div class="swiper-wrapper">
    <div class="swiper-slide page1">
      <div class="common-top-box">
        <img class="zhuanshi ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 6.23rem" src="./images/1-zhuanshi.png" alt="">
        <img class="top-articel ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 1.56rem" src="./images/1-top-article.png" alt="">
        <img class="top-article-2 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 1.11rem" src="./images/1-top-article-2.png" alt="">
        <img class="lanmu ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 4.73rem" src="./images/1-lanmu.png" alt="">
        <img class="screen ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 3.38rem" src="./images/1-screen.png" alt="">
        <img class="search ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s" style="width: 1.23rem" src="./images/1-search.png" alt="">
        <img class="person ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: .66rem" src="./images/1-person.png" alt="">
        <img class="study-2 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s" style="width: 2.56rem" src="./images/1-2-study-tip.png" alt="">
      </div>
      <div class="bottom-box">
        <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 1.09rem" src="./images/comon-douhao.png" alt="">
        <div class="text-box">
          <p class="title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">指尖上的微党校</p>
          <div class=" ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
               swiper-animate-delay="1s">
            <p class="desc">专属定制开发“党校教育”小程序平台 </p>
            <p class="desc">建立丰富的党课资源库，灵活参与学习教育</p>
            <p class="desc">足不出户，自主学习最新党校知识</p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide page2">
      <div class="common-top-box" style="overflow: hidden">
        <img class="phone-bg ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 7.50rem" src="./images/2-phone-bg.png" alt="">
        <img class="clock ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 1.36rem" src="./images/2-clock.png" alt="">
        <img class="phone-content ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 2.94rem" src="./images/2-phone-content.png" alt="">
        <img class="book ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 2.16rem" src="./images/2-book.png" alt="">
        <img class="phone-bottom ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.1s" style="width: 4.97rem" src="./images/2-phone-bottom.png" alt="">
      </div>
      <img class="phone-bottom2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.1s" style="width: 4.24rem" src="./images/2-phone-bottom-2.png" alt="">
      <div class="bottom-box">
        <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 1.09rem" src="./images/comon-douhao.png" alt="">
        <div class="text-box">
          <p class="title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">四大板块，全方位需求应答</p>
          <p class="desc ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s"><span>教育学习</span><span>党员学习</span><span>政策法规</span><span>党校考试</span></p>
        </div>
      </div>
    </div>
    <div class="swiper-slide page3">
      <div class="common-top-box">
        <img class="top-center-img-3 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 6.39rem" src="./images/3-top-center-img.png" alt="">
      </div>
      <div class="bottom-box">
        <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 1.09rem" src="./images/comon-douhao.png" alt="">
        <div class="text-box">
          <p class="title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s">定制需求，全闭环激励式学习</p>
          <div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
               swiper-animate-delay="1s">
            <p class="desc"><span>考试中心</span><span>在线学习</span><span>学习管理</span><span>学习计划</span></p>
            <p class="desc"><span>统计分析</span><span>学习讨论</span><span>学习笔记</span><span>数字图书馆</span></p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide page4">
      <div class="common-top-box">
        <img class="video-list ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s" style="width: 3.28rem" src="./images/4-top-video-list.png" alt="">
        <img class="dj-h5 ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 1.02rem" src="./images/4-dj-h5.png" alt="">
        <img class="class ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 1.02rem" src="./images/4-class.png" alt="">
        <img class="mg-animation ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 1.42rem" src="./images/4-mg-animation.png" alt="">
        <img class="vr ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s" style="width: 1.97rem" src="./images/4-vr-zhan.png" alt="">
      </div>
      <div class="bottom-box">
        <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: 1.09rem" src="./images/comon-douhao.png" alt="">
        <div class="text-box">
          <p class="title ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s"
             swiper-animate-delay="1s">打造个性多样的学习方式</p>
          <p class="desc ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1.5s"><span>VR 党建云展馆</span><span>MG 动画设计制作</span></p>
          <p class="desc ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1.5s"><span>党建 H5 模版</span><span>党课视频资料库</span></p>
        </div>
      </div>
    </div>
    <div class="swiper-slide page5">
      <div class="common-top-box">
        <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s" src="./images/5-top-center-img.png" alt="">
        <img class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" src="./images/5-top-center-bg.png" alt="">
      </div>
      <div class="bottom-box">
        <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.8s" style="width: 1.09rem" src="./images/comon-douhao.png" alt="">
        <div class="text-box">
          <p class="title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="1s">开放式学习格局</p>
          <div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
               swiper-animate-delay="1.2s">
            <p class="desc">依托“大数据”，与传统党校教育工作资源共享、优势互补 </p>
            <p class="desc">实现党校学习工作的信息化、数字化</p>
            <p class="desc">构建个体党员学、考、评、一体的动态学习模式</p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide page6">
      <div class="common-top-box" style="overflow: hidden">
        <img class="phone ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" src="./images/6-phone.png" alt="">
        <img class="video-list ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.8s" style="width: 4.53rem" src="./images/6-video-list.png" alt="">
      </div>
      <div class="bottom-box">
        <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.8s" style="width: 1.09rem" src="./images/comon-douhao.png" alt="">
        <div class="text-box">
          <p class="title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="1s">解决教育学习方式单一化</p>
          <p class="desc ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1.2s">通过微信小程序党建应用平台 </p>
          <p class="desc ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1.2s">利用碎片化时间，将党的教育学习融入日常生活</p>
        </div>
      </div>
    </div>
    <div class="swiper-slide page7">
      <div class="common-top-box">
        <img class="phone ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" src="./images/7-phone.png" alt="">
        <img class="phone-content ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 3.27rem" src="./images/7-article-2.png" alt="">
        <img class="article1 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 5.16rem" src="./images/7-article-1.png" alt="">
        <img class="wang1 ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 1.03rem" src="./images/7-wang-1.png" alt="">
        <img class="wang2 ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 1.19rem" src="./images/7-wang-2.png" alt="">
        <img class="wang3 ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s"
             swiper-animate-delay="1s" style="width: 1.19rem" src="./images/7-wang-3.png" alt="">
        <img class="yuan ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s" style="width: .52rem" src="./images/7-yuan.png" alt="">
        <img class="hand ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="1.5s" style="width: 1.02rem" src="./images/7-hand.png" alt="">
      </div>
      <div class="bottom-box">
        <img class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
             swiper-animate-delay="0.8s" style="width: 1.09rem" src="./images/comon-douhao.png" alt="">
        <div class="text-box">
          <p class="title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s"
             swiper-animate-delay="1s">解决教育资源分散的问题</p>
          <p class="desc ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1.2s">提供党建资源运营服务 </p>
          <p class="desc ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1.2s">整合党校、主流媒体等权威党建资源供用户选择使用</p>
        </div>
      </div>
    </div>
    <div class="swiper-slide page8">
      <div class="topbox ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">
        <p class=" ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
           swiper-animate-delay="0.3s">联系试用</p>
        <div class="line ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="1s"></div>
      </div>
      <form class="page11-content ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s"
            swiper-animate-delay="0.3s">
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.3s">
          <div class="flex-row flex-y-center"><img style="width: .39rem" src="./images/8-icon-1.png" alt="">单位名称</div>
          <input type="text" placeholder="请输入您所在的单位名称">
        </div>
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.5s">
          <div class="flex-row flex-y-center"><img style="width: .37rem" src="./images/8-icon-2.png" alt="">党员人数</div>
          <input type="text" placeholder="请输入您所在单位的党员人数">
        </div>
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.7s">
          <div class="flex-row flex-y-center"><img style="width: .38rem" src="./images/8-icon-3.png" alt="">联系人</div>
          <input type="text" placeholder="请输入您的姓名">
        </div>
        <div class="item ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s"
             swiper-animate-delay="0.9s">
          <div class="flex-row flex-y-center"><img style="width: .33rem" src="./images/8-icon-4.png" alt="">联系方式</div>
          <input type="text" placeholder="请输入您的联系电话">
        </div>
        <button class="ani unse" swiper-animate-effect="zoomIn" swiper-animate-duration="2s"
                swiper-animate-delay="1.4s" type="submit">确认提交
        </button>
      </form>
    </div>
  </div>
</div>
<script src="./js/rem.js"></script>
<script src="./js/pace.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/swiper.min.js"></script>
<script src="./js/swiper.animate.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>

  window.onload = function () {
    var mySwiper = new Swiper('.pages-box', {
      direction: 'vertical', // 垂直切换选项
      loop: false, // 循环模式选项
      on: {
        init: function () {
          swiperAnimateCache(this); //隐藏动画元素
          swiperAnimate(this); //初始化完成开始动画
        },
        slideChangeTransitionEnd: function () {
          swiperAnimate(this); //每个slide切换结束时也运行当前slide动画

          if (this.activeIndex !== 7) {
            $('.u-arrow-bottom').show();
          } else {
            $('.u-arrow-bottom').hide();
          }

          //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
        }
      },
    });
    Pace.on('hide', function () {
      $('.pages-box').css({opacity: 1})
    });
    $(document).ready(function () {
      var audio = document.getElementById('media');
      audio.play();
      if (audio.paused) {
        $('#audio_btn').removeClass('rotate')
      } else {
        $('#audio_btn').addClass('rotate')
      }
      ;
      document.addEventListener('WeixinJSBridgeReady', function () {
        audio.play();
        $('#audio_btn').addClass('rotate')
      }, false)
      $('#audio_btn').click(function () {
        if (audio.paused) {
          audio.play();
          $(this).addClass('rotate')
        } else {
          audio.pause();// 暂停
          $(this).removeClass('rotate')
        }

      })
    });
  };
</script>
<script>
  $(function () {
    $("button[type='submit']").click(function (e) {
      e.preventDefault();

    })
  })
</script>

<script>
  $(function () {
    var url = encodeURIComponent(window.location.href);
    var reulut;

    $.post('https://www.cloudcpc.com/share.php',
        {"url": url},
        function (result) {
          reulut = result;
          wx.config({
            debug: false,
            appId: reulut.appId, // 必填，公众号的唯一标识
            timestamp: reulut.timestamp, // 必填，生成签名的时间戳
            nonceStr: reulut.nonceStr, // 必填，生成签名的随机串
            signature: reulut.signature,// 必填，签名
            jsApiList: [ // 必填，需要使用的JS接口列表
              'onMenuShareAppMessage', //1.0 分享到朋友
              'onMenuShareTimeline', //1.0分享到朋友圈
              'updateAppMessageShareData', //1.4 分享到朋友
              'updateTimelineShareData' //1.4分享到朋友圈
            ]
          });

          wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData({
              title: '七一云党建“党校教育”平台', // 分享标题
              desc: '七一云党建，互联网+智慧党建新阵地', // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.cloudcpc.com/h5/dj-dx-edu/images/share-icon-edu.png', // 分享图标
            });

            wx.updateTimelineShareData({
              title: '七一云党建“党校教育”平台', // 分享标题
              desc: '七一云党建，互联网+智慧党建新阵地', // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.cloudcpc.com/h5/dj-dx-edu/images/share-icon-edu.png', // 分享图标
            });
          });

        }
    );
  })
</script>
</body>
</html>